<template>
  <div class="home-container">
    <!-- 顶部导航栏 -->
    <nav class="navbar">
      <div class="nav-brand">
  <h1 class="logo">✨ CodeForge AI</h1>
      </div>
      <div class="nav-menu">
        <div class="nav-stats">
          <span class="stat-item" title="生成总数">📊 {{ userStats.total_generations }}</span>
          <button @click="showAchievements = !showAchievements" class="btn btn-text" title="成就">
            🏆 {{ achievementProgress }}
          </button>
        </div>
        <button @click="exportConversation" class="btn btn-text" title="导出对话为 Markdown">
          📥 导出
        </button>
        <button @click="themeStore.toggleTheme()" class="btn btn-text theme-toggle" :title="themeStore.theme === 'dark' ? '切换到亮色主题' : '切换到暗色主题'">
          {{ themeStore.theme === 'dark' ? '☀️' : '🌙' }}
        </button>
        <span class="username">{{ authStore.username }}</span>
        <button @click="handleLogout" class="btn btn-secondary">退出</button>
      </div>
    </nav>

    <!-- 成就弹窗 -->
    <div v-if="showAchievements" class="achievement-modal" @click="showAchievements = false">
      <div class="achievement-content" @click.stop>
        <h2>🏆 成就系统</h2>
        <div class="achievement-grid">
          <div 
            v-for="ach in achievements" 
            :key="ach.type"
            :class="['achievement-card', { unlocked: ach.unlocked }]"
          >
            <div class="achievement-icon">{{ ach.name.split(' ')[0] }}</div>
            <div class="achievement-name">{{ ach.name.substring(2) }}</div>
            <div class="achievement-desc">{{ ach.description }}</div>
            <div v-if="ach.unlocked" class="unlock-badge">已解锁</div>
          </div>
        </div>
        <button @click="showAchievements = false" class="btn btn-primary">关闭</button>
      </div>
    </div>

    <!-- 主内容区：ChatGPT 风格布局 -->
    <div class="main-content">
      <!-- 左侧历史记录（玻璃霓虹） -->
      <aside class="sidebar glass neon-border">
        <div class="sidebar-header">
          <h3>历史记录</h3>
          <button @click="handleClearHistory" class="btn btn-text" title="清空历史">
            🗑️
          </button>
        </div>
        <div class="history-list">
          <div
            v-for="conv in conversations"
            :key="conv.id"
            class="history-item"
            @click="loadConversation(conv)"
          >
            <div class="history-prompt">{{ truncate(conv.prompt, 50) }}</div>
            <div class="history-time">{{ formatTime(conv.created_at) }}</div>
          </div>
          <div v-if="conversations.length === 0" class="empty-state">
            暂无历史记录
          </div>
        </div>
      </aside>

      <!-- 中间聊天区域（ChatGPT 风） -->
      <main class="workspace glass neon-border">
        <div class="language-notice">
          ⚠️ 注意: 当前模型仅支持<strong>英文</strong>提示词，请使用英文描述您的需求
        </div>

        <!-- 消息流 -->
        <section class="chat-window" ref="chatWindowEl">
          <div v-for="(m, idx) in messages" :key="idx" :class="['msg', m.role]">
            <div class="avatar" :data-role="m.role">{{ m.role === 'user' ? '🧑' : '🤖' }}</div>
            <div class="bubble">
              <div v-if="m.code" class="code-block">
                <div class="code-header">
                  <span class="code-lang">🐍 Python</span>
                  <div class="code-actions">
                    <button class="btn-icon" @click="copyText(m.code)" title="复制代码">📋</button>
                    <button class="btn-icon" @click="downloadCode(m.code)" title="下载为文件">💾</button>
                  </div>
                </div>
                <pre><code v-html="highlightCode(m.code)" class="hljs"></code></pre>
              </div>
              <div v-else class="text">{{ m.content }}</div>
            </div>
          </div>
          <div v-if="loading" class="loading loading-inline"><div class="spinner"></div><span>{{ loadingText }}</span></div>
        </section>

        <!-- 输入合成区（底部固定） -->
        <section class="composer">
          <textarea
            v-model="prompt"
            class="composer-input"
            rows="3"
            placeholder="Describe your function in English... e.g. Write a function that fetches JSON from a URL with retries and a timeout and returns a parsed dict"
            :disabled="loading"
            @keydown.enter.exact.prevent="onSend"
          ></textarea>
          <div class="composer-actions">
            <button class="btn btn-primary" :disabled="loading || !prompt.trim()" @click="onSend">✨ Send</button>
          </div>
        </section>

        <!-- 错误提示 -->
        <div v-if="error" class="error-box">
          {{ error }}
        </div>
      </main>

      <!-- 右侧提示面板 -->
      <aside class="info-panel glass neon-border">
        <div class="info-card">
          <h3>💡 使用提示</h3>
          <ul>
            <li>请使用英文描述功能需求</li>
            <li>目前仅支持英文提示词</li>
            <li>描述越详细,生成效果越好</li>
          </ul>
        </div>
        <div class="info-card">
          <h3>✅ 示例提示词 (英文)</h3>
          <div class="example-item" @click="useExample('Write a function that fetches JSON from a URL with retries and a timeout, validates status 200, and returns a parsed dict')">
            <strong>HTTP 请求:</strong> Write a function that fetches JSON from a URL with retries and a timeout, validates status 200, and returns a parsed dict
          </div>
          <div class="example-item" @click="useExample('Write a function that reads a CSV file into a pandas DataFrame and returns the top N rows where a given column equals a target value')">
            <strong>数据处理:</strong> Write a function that reads a CSV file into a pandas DataFrame and returns the top N rows where a given column equals a target value
          </div>
          <div class="example-item" @click="useExample('Write a function that writes logs to a rotating file with max size and backup count, and logs an error message when an exception occurs')">
            <strong>日志与治理:</strong> Write a function that writes logs to a rotating file with max size and backup count, and logs an error message when an exception occurs
          </div>
        </div>
      </aside>
    </div>

    <!-- Toast 通知 -->
    <Teleport to="body">
      <div v-if="toast.show" :class="['toast', toast.type]">
        {{ toast.message }}
      </div>
    </Teleport>

    <!-- 新成就解锁动画 -->
    <Teleport to="body">
      <div v-if="newAchievement" class="achievement-unlock">
        <div class="achievement-unlock-content">
          <h2>🎉 解锁新成就!</h2>
          <div class="unlock-icon">{{ newAchievement.name.split(' ')[0] }}</div>
          <div class="unlock-name">{{ newAchievement.name }}</div>
        </div>
      </div>
    </Teleport>
  </div>
</template>

<script setup>
import { ref, onMounted, computed, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
import { useThemeStore } from '@/stores/theme'
import api from '@/utils/api'
import hljs from 'highlight.js/lib/core'
import python from 'highlight.js/lib/languages/python'
import 'highlight.js/styles/github-dark.css'

// 注册 Python 语言支持
hljs.registerLanguage('python', python)

const router = useRouter()
const authStore = useAuthStore()
const themeStore = useThemeStore()

const prompt = ref('')
const generatedCode = ref('')
const loading = ref(false)
const loadingText = ref('正在生成代码...')
const error = ref('')
const conversations = ref([])
const messages = ref([
  { role: 'assistant', content: "Hi, I'm your AI coding assistant. Describe a production-grade function in English (HTTP, data processing, logging, files, databases, etc.). I will generate a clean, single Python function and auto-add required imports." }
])
const chatWindowEl = ref(null)
const userStats = ref({
  total_generations: 0,
  consecutive_days: 0
})
const achievements = ref([])
const showAchievements = ref(false)
const newAchievement = ref(null)

const toast = ref({
  show: false,
  type: 'success',
  message: ''
})

const achievementProgress = computed(() => {
  const unlocked = achievements.value.filter(a => a.unlocked).length
  const total = achievements.value.length
  return `${unlocked}/${total}`
})

// 加载用户统计和成就
async function loadUserData() {
  try {
    const [statsRes, achRes] = await Promise.all([
      api.get('/stats'),
      api.get('/achievements')
    ])
    userStats.value = statsRes.data
    achievements.value = achRes.data.achievements
  } catch (err) {
    console.error('加载用户数据失败:', err)
  }
}

// 加载历史记录
async function loadHistory() {
  try {
    const response = await api.get('/conversations', {
      params: { page: 1, page_size: 20 }
    })
    conversations.value = response.data.conversations
  } catch (err) {
    console.error('加载历史记录失败:', err)
  }
}

// 生成代码
async function generateCode() {
  if (!prompt.value.trim()) return

  loading.value = true
  loadingText.value = '正在生成代码...'
  error.value = ''
  generatedCode.value = ''

  // 追加用户消息
  messages.value.push({ role: 'user', content: prompt.value })

  try {
    const response = await api.post('/generate', {
      prompt: prompt.value,
      max_new_tokens: 256,
      save_history: true
    })

    generatedCode.value = response.data.code

    // 以对话形式追加助手消息
    messages.value.push({ role: 'assistant', code: generatedCode.value })

    // 触发代码高亮
    await nextTick()

    // 重新加载历史和统计
    await Promise.all([loadHistory(), loadUserData()])
    
    // 检查是否有新成就(简化版,实际应该从后端返回)
    checkNewAchievements()
  } catch (err) {
    error.value = err.response?.data?.detail || '代码生成失败,请重试'
  } finally {
    loading.value = false
    nextTickScroll()
  }
}

// 代码高亮
function highlightCode(code) {
  try {
    return hljs.highlight(code, { language: 'python' }).value
  } catch (e) {
    console.error('代码高亮失败:', e)
    return code
  }
}

// 复制指定文本
function copyText(text) {
  navigator.clipboard.writeText(text).then(() => showToast('已复制到剪贴板', 'success'))
    .catch(() => showToast('复制失败', 'error'))
}

// 下载代码为文件
function downloadCode(code, filename = 'generated_code.py') {
  const blob = new Blob([code], { type: 'text/plain;charset=utf-8' })
  const url = URL.createObjectURL(blob)
  const link = document.createElement('a')
  link.href = url
  link.download = filename
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
  URL.revokeObjectURL(url)
  showToast('代码已下载', 'success')
}

// 导出对话为 Markdown
function exportConversation() {
  if (messages.value.length <= 1) {
    showToast('暂无对话内容可导出', 'error')
    return
  }

  let markdown = `# CodeForge AI - 对话记录\n\n`
  markdown += `**导出时间:** ${new Date().toLocaleString('zh-CN')}\n\n`
  markdown += `**用户:** ${authStore.username}\n\n`
  markdown += `---\n\n`

  messages.value.forEach((msg, index) => {
    if (index === 0) return // 跳过欢迎消息

    if (msg.role === 'user') {
      markdown += `## 💬 用户提问\n\n`
      markdown += `${msg.content}\n\n`
    } else if (msg.role === 'assistant') {
      markdown += `## 🤖 AI 回复\n\n`
      if (msg.code) {
        markdown += `\`\`\`python\n${msg.code}\n\`\`\`\n\n`
        if (msg.explanation) {
          markdown += `**代码解释:**\n\n${msg.explanation}\n\n`
        }
      } else {
        markdown += `${msg.content}\n\n`
      }
    }
    markdown += `---\n\n`
  })

  // 下载 Markdown 文件
  const blob = new Blob([markdown], { type: 'text/markdown;charset=utf-8' })
  const url = URL.createObjectURL(blob)
  const link = document.createElement('a')
  link.href = url
  const timestamp = new Date().toISOString().replace(/[:.]/g, '-').slice(0, -5)
  link.download = `CodeForge_Conversation_${timestamp}.md`
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
  URL.revokeObjectURL(url)
  showToast('对话已导出为 Markdown', 'success')
}

// 加载对话记录
function loadConversation(conv) {
  prompt.value = conv.prompt
  generatedCode.value = conv.generated_code
}

// 使用示例
function useExample(text) {
  prompt.value = text
}

// 清空历史
async function handleClearHistory() {
  if (!confirm('确定要清空所有历史记录吗?')) return

  try {
    await api.delete('/conversations')
    conversations.value = []
    showToast('历史记录已清空', 'success')
  } catch (err) {
    showToast('清空失败', 'error')
  }
}

// 退出登录
function handleLogout() {
  authStore.logout()
  router.push('/login')
}

// 显示Toast
function showToast(message, type = 'success') {
  toast.value = { show: true, message, type }
  setTimeout(() => {
    toast.value.show = false
  }, 3000)
}

// 检查新成就(简化版)
function checkNewAchievements() {
  // 这里可以检查用户统计,显示新解锁的成就
  // 实际应该从后端API返回
}

// 显示成就解锁动画 (预留功能,未来可用于显示成就解锁通知)
// eslint-disable-next-line no-unused-vars
function showAchievementUnlock(achievement) {
  newAchievement.value = achievement
  setTimeout(() => {
    newAchievement.value = null
  }, 3000)
}

// 截断文本
function truncate(text, length) {
  if (text.length <= length) return text
  return text.substring(0, length) + '...'
}

// 格式化时间
function formatTime(timestamp) {
  const date = new Date(timestamp)
  const now = new Date()
  const diff = now - date

  if (diff < 60000) return '刚刚'
  if (diff < 3600000) return `${Math.floor(diff / 60000)}分钟前`
  if (diff < 86400000) return `${Math.floor(diff / 3600000)}小时前`
  
  return date.toLocaleDateString('zh-CN', {
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  })
}

onMounted(() => {
  loadHistory()
  loadUserData()
})

function nextTickScroll() {
  requestAnimationFrame(() => {
    const el = chatWindowEl.value
    if (el) el.scrollTop = el.scrollHeight
  })
}

function onSend() {
  generateCode()
  prompt.value = ''
}
</script>

<style scoped>
/* 继承之前的所有样式 */
.home-container {
  min-height: 100vh;
  background-color: var(--bg-secondary);
}

.navbar {
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border-color);
  padding: 1rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(8px);
  transition: all 0.3s ease;
}

[data-theme="dark"] .navbar {
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
}

.nav-brand .logo {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary-color);
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.nav-stats {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-right: 1rem;
  padding-right: 1rem;
  border-right: 1px solid var(--border-color);
}

.stat-item {
  font-size: 0.875rem;
  color: var(--text-secondary);
  padding: 0.25rem 0.5rem;
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
}

.username {
  font-weight: 500;
  color: var(--text-secondary);
}

.theme-toggle {
  font-size: 1.25rem;
  padding: 0.5rem;
  transition: transform 0.3s ease;
}

.theme-toggle:hover {
  transform: rotate(20deg) scale(1.1);
}

/* 成就弹窗 */
.achievement-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.achievement-content {
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  padding: 2rem;
  max-width: 800px;
  max-height: 80vh;
  overflow-y: auto;
}

.achievement-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}

.achievement-card {
  padding: 1rem;
  border-radius: var(--radius-md);
  text-align: center;
  background: var(--bg-tertiary);
  opacity: 0.5;
  transition: all 0.3s;
}

.achievement-card.unlocked {
  opacity: 1;
  background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
  box-shadow: var(--shadow-md);
}

.achievement-icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.achievement-name {
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.achievement-desc {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.unlock-badge {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: var(--success-color);
  font-weight: 600;
}

/* 成就解锁动画 */
.achievement-unlock {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2000;
  animation: unlockPulse 0.5s ease-out;
}

@keyframes unlockPulse {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.1);
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

.achievement-unlock-content {
  background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
  padding: 2rem 3rem;
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  text-align: center;
  color: white;
}

.unlock-icon {
  font-size: 4rem;
  margin: 1rem 0;
  animation: bounce 0.5s ease-in-out infinite alternate;
}

@keyframes bounce {
  from { transform: translateY(0); }
  to { transform: translateY(-10px); }
}

.unlock-name {
  font-size: 1.5rem;
  font-weight: 700;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

/* 其他已有样式保持不变 */
.main-content {
  display: grid;
  grid-template-columns: 280px 1fr 320px;
  gap: 1.5rem;
  padding: 1.5rem;
  max-width: 1800px;
  margin: 0 auto;
  height: calc(100vh - 73px);
}

.sidebar {
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: all 0.3s ease;
}

[data-theme="dark"] .sidebar {
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
}

.sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-color);
}

.sidebar-header h3 {
  font-size: 1rem;
  font-weight: 600;
}

.history-list {
  overflow-y: auto;
  flex: 1;
}

.history-item {
  padding: 0.875rem;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: 0.5rem;
}

.history-item:hover {
  background-color: var(--bg-tertiary);
}

.history-prompt {
  font-size: 0.875rem;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}

.history-time {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.empty-state {
  text-align: center;
  color: var(--text-secondary);
  font-size: 0.875rem;
  padding: 2rem 1rem;
}

.workspace {
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow-sm);
  overflow-y: auto;
  transition: all 0.3s ease;
}

[data-theme="dark"] .workspace {
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
}

.language-notice {
  background: rgba(var(--primary-rgb, 14, 165, 233), 0.1);
  color: var(--text-primary);
  padding: 1rem 1.5rem;
  border-radius: var(--radius-md);
  margin-bottom: 1.5rem;
  border-left: 4px solid var(--primary-color);
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.3s ease;
}

[data-theme="dark"] .language-notice {
  background: linear-gradient(135deg, rgba(34,211,238,0.15) 0%, rgba(129,140,248,0.15) 100%);
}

.language-notice strong {
  color: var(--primary-color);
  font-weight: 600;
}

/* Chat 界面 */
.chat-window {
  height: calc(100vh - 310px);
  overflow-y: auto;
  padding: 0.25rem 0.5rem 0 0.25rem;
}

.msg {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.msg .avatar {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  transition: all 0.3s ease;
}

[data-theme="dark"] .msg .avatar {
  background: rgba(255,255,255,0.06);
}

.msg .bubble {
  flex: 1;
  padding: 1rem;
  border-radius: var(--radius-md);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  transition: all 0.3s ease;
}

[data-theme="dark"] .msg .bubble {
  background: rgba(255,255,255,0.03);
}

.msg.user .bubble { 
  border-color: var(--secondary-color);
  opacity: 0.9;
}

.msg.assistant .bubble { 
  border-color: var(--primary-color);
  opacity: 0.9;
}

[data-theme="dark"] .msg.user .bubble { border-color: rgba(129,140,248,0.35); }
[data-theme="dark"] .msg.assistant .bubble { border-color: rgba(34,211,238,0.35); }

.bubble .text { white-space: pre-wrap; }
.bubble .code-block { margin-top: 0.25rem; }

/* 代码块头部 */
.code-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.75rem;
  background: var(--bg-secondary);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  border-bottom: 1px solid var(--border-color);
  margin: -1rem -1rem 0.5rem -1rem;
}

[data-theme="dark"] .code-header {
  background: rgba(0, 0, 0, 0.3);
}

.code-lang {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.code-actions {
  display: flex;
  gap: 0.25rem;
}

.btn-icon {
  background: transparent;
  border: none;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
  font-size: 1rem;
  opacity: 0.7;
  transition: all 0.2s;
  border-radius: var(--radius-sm);
}

.btn-icon:hover {
  opacity: 1;
  background: var(--bg-tertiary);
  transform: scale(1.1);
}

/* 代码高亮样式增强 */
.bubble .code-block pre {
  margin: 0;
  padding: 1rem;
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  overflow-x: auto;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 0.875rem;
  line-height: 1.6;
}

[data-theme="dark"] .bubble .code-block pre {
  background: rgba(0, 0, 0, 0.4);
}

.bubble .code-block code {
  display: block;
}

.bubble-actions { display: flex; gap: 0.5rem; margin-top: 0.5rem; }

.composer {
  position: sticky;
  bottom: 0;
  margin-top: 1rem;
  background: linear-gradient(180deg, transparent, var(--bg-secondary) 60%);
  padding-top: .75rem;
  transition: all 0.3s ease;
}

[data-theme="dark"] .composer {
  background: linear-gradient(180deg, rgba(7,11,20,0.00), rgba(7,11,20,0.65) 60%);
}
.composer-input {
  resize: none;
}
.composer-actions { display: flex; justify-content: flex-end; gap: .75rem; margin-top: .5rem; }

.loading-inline { display: flex; align-items: center; gap: .75rem; padding: .5rem 0; color: var(--text-secondary); }

.input-section h2 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.input-section textarea {
  margin-bottom: 1rem;
}

.action-buttons {
  display: flex;
  gap: 1rem;
}

.loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  gap: 1rem;
}

.loading p {
  color: var(--text-secondary);
}

.output-section {
  margin-top: 2rem;
}

.output-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.output-header h3 {
  font-size: 1.125rem;
  font-weight: 600;
}

.output-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.error-box {
  background-color: rgba(239, 68, 68, 0.1);
  color: var(--error-color);
  padding: 1rem;
  border-radius: var(--radius-md);
  margin-top: 1rem;
  border: 1px solid var(--error-color);
}

[data-theme="light"] .error-box {
  background-color: #FEE2E2;
}

.info-panel {
  overflow-y: auto;
}

.info-card {
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  margin-bottom: 1rem;
}

.info-card h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.info-card ul {
  list-style: none;
  padding: 0;
}

.info-card li {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
  padding-left: 1.25rem;
  position: relative;
}

.info-card li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--primary-color);
}

.example-item {
  padding: 0.75rem;
  background-color: var(--bg-secondary);
  border-radius: var(--radius-md);
  margin-bottom: 0.5rem;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 0.875rem;
}

.example-item:hover {
  background-color: var(--bg-tertiary);
  transform: translateY(-1px);
}

.example-item strong {
  color: var(--primary-color);
  display: block;
  margin-bottom: 0.25rem;
}

@media (max-width: 1200px) {
  .main-content {
    grid-template-columns: 1fr;
  }
  
  .sidebar,
  .info-panel {
    display: none;
  }
}
</style>
